<template>
  <div class="steps"
       :class="`steps-${edit ? 'row' : 'column'}`">
    <div class="step"
         :class="edit ? 'step-isEdit' : 'step-notEdit'"
         v-for="(item, index) of stepData"
         :key="index">
      <p class="step-roleName">{{item.roleName}}
        <span v-if="edit"
              class="deleteRole"
              @click="handleDelete(item, index)">X</span>
      </p>
      <div :class="edit ? 'isEdit' : 'notEdit'"
           v-if="!edit">
        <p :class="`g-status-${item.status}`">{{tranStatus(item.status)}}</p>
        <p class="step-time">{{item.time}}</p>
        <div class="step-des"
             :title="item.des"
             :class="`step-des-${item.status}`">{{item.des}}</div>
      </div>
      <div :class="`step-line-${edit ? 'isEdit' : 'notEdit'}`"
           v-if="index !== stepData.length-1 || edit"></div>
    </div>
    <div class="step step-isEdit"
         v-if="edit">
      <p class="step-roleName step-add"
         @click="handleAdd">
        +
      </p>

    </div>
  </div>
</template>
<script>
export default {
  name: 'Step',
  props: {
    stepData: {
      type: Array,
      default: () => [{ roleName: '辅导员1', des: '', time: '2018.02.24', status: 1 }, { roleName: '辅导员1', des: '', time: '2018.02.24', status: 1 }, { roleName: '辅导员2', des: '与实际情况不符', time: '2018.02.24', status: 0 }]
    },
    edit: {
      type: Boolean,
      default: true
    },
    handleAdd: {
      type: Function,
      required: this.edit,
      default: () => {
        console.log('handleAdd')
      }
    },
    handleDelete: {
      type: Function,
      required: this.edit,
      default: (item, index) => {
        console.log(item, index)
      }
    }
  },
  methods: {
    tranStatus (status) {
      let tranStatus = ''
      switch (status) {
        case 1:
          tranStatus = '审核中'
          break
        case 2:
          tranStatus = '已同意'
          break
        case 3:
          tranStatus = '驳回'
          break
      }
      return tranStatus
    }
  }
}
</script>
<style lang="less" scoped>
.steps {
  display: flex;
  &-row {
    flex-direction: row;
  }
  &-column {
    flex-direction: column;
  }
}
.steps .step {
  // width: auto;
  position: relative;
  p {
    display: inline-block;
    margin: 2px !important;
  }
  .notEdit {
    display: inline-block;
  }
  .isEdit {
    display: none;
  }
  &-line-notEdit {
    height: 30px;
    width: 1px;
    border: 1px dashed #000;
    position: relative;
    left: 30px;
  }
  &-line-isEdit {
    height: 1px;
    width: 30px;
    border: 1px dashed #000;
    position: absolute;
    left: 65px;
    top: 30px;
  }
  &-roleName {
    width: 60px;
    height: 60px;
    // border: 2px solid #409eff;
    border-radius: 50%;
    line-height: 60px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: #409eff;
    position: relative;
    .deleteRole {
      position: absolute;
      display: inline-block;
      width: 15px;
      height: 15px;
      top: 0;
      right: 0;
      line-height: 15px;
      text-align: center;
      background: #000;
      border-radius: 50%;
      cursor: pointer;
    }
  }
  // &-status-success {
  //   color: #339966;
  //   width: 80px;
  // }
  // &-status-error {
  //   color: #ff0000;
  //   width: 80px;
  // }
  &-time {
    margin-left: 15px;
  }
  &-des {
    position: absolute;
    left: 65px;
    width: 535px;
    height: 55px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &-3 {
      color: red;
    }
    &-2 {
      color: #1c901a;
    }
  }
}
.step-isEdit {
  width: 100px;
  display: inline-block;
}
.step-add {
  background: #999999 !important;
  font-size: 35px !important;
  // position: relative;
  // top: 7px;
  cursor: pointer;
}
</style>
